<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通达快递 TDCargo-通行天下,使命必达</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    .grid-parent {
        width: 370px;
        height: 270px;
        border: 1px dashed #000;
        padding: 15px;
    }

    ul li {
        display: inline-block;
        margin-bottom: 5px;
    }

    ul li div:nth-child(2n) {
        margin-top: 5px;
    }

    .qrcode {
        width: 125px;
        height: 125px;
    }
</style>
<body style="overflow: auto;">
<div class="layui-fluid" style="padding: 15px;">
    <ul id="express-print-container"></ul>
</div>

<script type="text/html" id="express-print-tmp">
    {{#  layui.each(d, function(index, item){ }}
    <li>
        <div class="grid-parent">
            <h4>姓名: {{item.receiverName}}</h4>
            <br>
            <h4>电话: {{item.receiverTelphone}}</h4>
            <br>
            <h4>地址: {{item.receiverProvince}}{{item.receiverCity}}{{item.receiverAddr}}</h4>
            <br>
            <div style="display: block;">
                <div id="qrcode-{{item.waybillNo}}-1" style="display: inline-block;"></div>
                <div id="goods-{{item.waybillNo}}-1" style="display: inline-block; margin-left: 15px;"></div>
            </div>
            <br>
            <h4>{{item.waybillNo}}</h4>
        </div>
        <div class="grid-parent">
            <h4>姓名: {{item.receiverName}}</h4>
            <br>
            <h4>电话: {{item.receiverTelphone}}</h4>
            <br>
            <h4>地址: {{item.receiverProvince}}{{item.receiverCity}}{{item.receiverAddr}}</h4>
            <br>
            <div style="display: block;">
                <div id="qrcode-{{item.waybillNo}}-2" style="display: inline-block;"></div>
                <div id="goods-{{item.waybillNo}}-2" style="display: inline-block; margin-left: 15px;"></div>
            </div>
            <br>
            <h4>{{item.waybillNo}}</h4>
        </div>
    </li>
    {{# }); }}
</script>

<script src="/layui/layui.js"></script>
<script src="/src/lib/other/qrcode.js"></script>
<script>
    var $ = layui.$;
    layui.config({
        base: '/src/',
        version: new Date().getTime()
    }).extend({setter: "config", admin: "lib/admin", view: "lib/view"})
        .define(['setter', 'admin', 'laytpl'], function () {
            var $ = layui.$,
                admin = layui.admin,
                laytpl = layui.laytpl;

            function getRequestParam(param) {
                var requestString = location.search;
                var reg = new RegExp("(?:\\?|&)" + param + "=(.*?)(?:&|$)");
                if (reg.test(requestString)) {
                    return decodeURIComponent(RegExp.$1);
                } else {
                    return '';
                }
            }

            admin.req({
                url: "/bil/listBilExpressByIds",
                data: {"ids": getRequestParam("ids")},
                beforeSend: function () {
                    layer.load(2, {time: 100 * 1000});
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                done: function (res) {
                    var tmp = $("#express-print-tmp").html();
                    laytpl(tmp).render(res.data.expressList, function (html) {
                        $("#express-print-container").append(html);
                    });

                    var url = window.location.protocol + "//" + window.location.host + layui.setter.base + 'views/bil/logisticsList.html?waybillNo=';
                    $.each(res.data.expressList, function (index, item) {
                        new QRCode(document.getElementById("qrcode-" + item.waybillNo + "-1"), {
                            text: url + item.waybillNo,
                            width: 125,
                            height: 125,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                        new QRCode(document.getElementById("qrcode-" + item.waybillNo + "-2"), {
                            text: url + item.waybillNo,
                            width: 125,
                            height: 125,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });

                        //if (index === 0) {
                            $("#goods-" + item.waybillNo + "-1").append("运单日期：" + item.createTime + "<br>");
                            if(item.premium) {
                                $("#goods-" + item.waybillNo + "-1").append("运单保价：" + item.premium + "<br>");
                            }
                            $("#goods-" + item.waybillNo + "-2").append("运单日期：" + item.createTime + "<br>");
                            if(item.premium) {
                                $("#goods-" + item.waybillNo + "-2").append("运单保价：" + item.premium + "<br>");
                            }
                        //}
                    });

                    $.each(res.data.goodsList, function (index, item) {
                        $("#goods-" + item.waybillNo + "-1").append("<h4>" + item.brand + item.name + "*" + item.count + "</h4>");
                        $("#goods-" + item.waybillNo + "-2").append("<h4>" + item.brand + item.name + "*" + item.count + "</h4>");
                    });
                }
            });
        });
</script>
</body>
</html>